<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>预约详情页面</title>
    <link rel="stylesheet" type="text/css" href="${ctxPath}/static/assets/aui/css/aui.css"/>
    <!-- jQuery Include -->
    <script type="text/javascript" src="${ctxPath}/static/assets/scripts/jquery.min.js"></script>
    <!--layuicss-->
    <link rel="stylesheet" href="${ctxPath}/static/assets/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${ctxPath}/static/assets/layui/layui.js"></script>
    <style>
        .aui-list-header{
            font-size: 16px;
        }
        .content{
            width: 100%;
            height: 6rem;
            background-color: white;
            font-size: 12px;
            text-align: left;
            font-family: auto;
            font-style: normal;
            overflow-y: auto;
            border: 1px solid #f2f2f2;
            color: #757575;
            padding: 6px;
        }
        ul>li>div>div{
            font-size: 0.6rem;
        }
        .aui-list-item-input>input{
            font-size: 0.6rem;
        }
        .moddle-content{
            overflow-y: auto;
        }
        #J_getCode{
            position: absolute;
            right: 0;
            top: 0.4rem;
        }
        #J_resetCode{
            position: absolute;
            right: 0;
            top: 0.4rem
        }
        #priceAndTime>li{
            padding-top: 17px;
            line-height: 0.5rem;
        }

        #priceAndTime>li>span:first-child{
            font-size: 14px;
            position: absolute;
            left: 4rem;
        }
        #priceAndTime>li>span:nth-child(2){
            font-size: 14px;
            color: red;
            position: absolute;
            right: 3rem;
        }
    </style>
</head>
<body>
<input type="hidden" value="${artId}" id="artId">
<input type="hidden" value="${businessId}" id="businessId">
<ul class="aui-list aui-form-list">
    <li >
        <header class="aui-bar aui-bar-nav">
            <a class="aui-pull-left aui-btn"  id="retn">
                <span class="aui-iconfont aui-icon-back"></span>返回
            </a>
            <div class="aui-title">预约详情页面</div>
        </header>
    </li>
</ul>
<div class="moddle-content">
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active" tapmode="" data-item-order="1">项目介绍<div></div></div>
        <div class="aui-tab-item" tapmode="" data-item-order="2">下单须知</div>
        <div class="aui-tab-item" tapmode="" data-item-order="3">注意事项</div>
    </div>
    <div class="content">

    </div>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header" style="font-size: 14px">详细地址</li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        称呼
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入你的称呼" maxlength="10" id="name">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        服务地址
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入服务地址" maxlength="30" id="area">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        门牌号
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入门牌号" id="number" maxlength="10">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        上门时间
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="上门时间">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        联系电话
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请预留手机号码" id="phone" maxlength="11">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        短信验证码
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入短信验证码" id="code" maxlength="4">
                        <div class="aui-btn aui-btn-primary" onclick="getCode(this)"
                             id="J_getCode">获取验证码</div>
                        <div class="aui-btn aui-btn-default" id="J_resetCode"
                             style="display: none;">
                            <span id="J_second">120</span>秒后重发
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        留言信息
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请输入留言信息" maxlength="500" id="remark">
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<footer class="aui-bar aui-bar-tab">
    <div class="aui-bar aui-margin-t-6 aui-text-white" tapmode="" >
        <ul class="aui-list" id="priceAndTime">
            <li class="aui-list-item">
                <span>价格:</span>
                <span>¥&nbsp;<span id="fee" style="color: red">123</span></span>
            </li>
            <li class="aui-list-item">
                <span>时间:</span>
                <span><span id="time" style="color: red">0</span>分钟</span>
            </li>
        </ul>
    </div>
    <div class="aui-bar-tab-item aui-btn aui-btn-info aui-text-white" tapmode="" style="width: 5rem;text-align: center" id="buyBtn">立即预约</div>
</footer>
</body>
</html>
<script>
    var  user=localStorage.getItem("userInfo");//以“key”为名称存储一个值“value”
    if(!user){
        location.href="${ctxPath}/wechat/public/toLoginPage";//未实现
    }
    var obj = JSON.parse(user); // --> parse error
    $(function(){
        //请求项目
        $.ajax({
            type: "POST",
            url: "${ctxPath}/artificerBusiness/getOneBusiness/${businessId}",
            dataType: 'json',
            contentType: "application/json",
            success:function(data){
                if(data.status=="0000"){
                    var  result= data.data;
                    $("#fee").html(result[0].price);
                    $("#time").html(result[0].serviceDuration);
                    localStorage.setItem("businessInfo",JSON.stringify(result[0]));
                    $(".content").html(result[0].describe);
                }
            }
        });
        //返回上个页面
        $("#retn").click(function(){
            location.href="${ctxPath}/artificerMeans/createOrderPage?artId=${artId}";
        })
        //下单须知
        $("#tab>div").each(function(){
            $(this).click(function(){
                $("#tab>div").each(function(){
                    $(this).removeClass("aui-active");
                })
                $(this).addClass("aui-active");
                var  val=$(this).attr("data-item-order");
                var  businessInfo=localStorage.getItem("businessInfo");
                var bsif=JSON.parse(businessInfo);
                if(val=="1"){//项目介绍
                    $(".content").html(bsif.describe);
                }else if(val=="2"){//下单须知
                    $(".content").html(bsif.orderNotice);
                }else if(val=="3"){//注意事项
                    $(".content").html(bsif.pointsAttention);
                }
            })
        })

        //下单信息查询
        $("#buyBtn").click(function () {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "${ctxPath}/wx/pay/unifiedorder",
                data: {
                    appointmentTime: new  Date().getTime(),
                    deliveryFee:0,
                    phone: $("#phone").val(),
                    totalFee: $("#fee").text().trim(),
                    businessType: $("#businessId").val(),
                    addressId:1,
                    type:1,
                    remark: $("#remark").val(),
                    consumerId:obj.id,
                    artificerId: $("#artId").val()
                },
                success: function(result){
                    if(result.status=="0000"){
                        function onBridgeReady(){
                            WeixinJSBridge.invoke(
                                'getBrandWCPayRequest', {
                                    "appId":result.data.appId,     //公众号名称，由商户传入
                                    "timeStamp": result.data.timeStamp,         //时间戳，自1970年以来的秒数
                                    "nonceStr":result.data.nonceStr, //随机串
                                    "package":result.data.packages,
                                    "signType":"MD5",         //微信签名方式：
                                    "paySign":result.data.paySign //微信签名
                                },
                                function(res){
                                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                        // 使用以上方式判断前端返回,微信团队郑重提示：
                                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                        alert("支付成功!");
                                    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){

                                    }else{

                                    }
                                });
                        }
                        if (typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener ){
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                            }else if (document.attachEvent){
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                            }
                        }else{
                            onBridgeReady();
                        }
                    }else{
                        alert(result.msg);
                    }
                },
                error:function(data){
                    alert("下单异常，请稍后再试!");
                }
            });
        })
    })
    /*获取验证码*/
    var isPhone = 1;
    function getCode(e) {
        var phone = checkPhone(); //验证手机号码
        if (isPhone) {
            resetCode(); //倒计时
            getMessage(phone);
        } else {
            $('#phone').focus();
        }
    }
    //验证手机号码
    function checkPhone() {
        var phone = $('#phone').val();
        var pattern = /^1[0-9]{10}$/;
        isPhone = 1;
        if (phone == '') {
            alert('请输入手机号码');
            isPhone = 0;
            return;
        }
        if (!pattern.test(phone)) {
            alert('请输入正确的手机号码');
            isPhone = 0;
            return;
        }
        return phone;
    }
</script>